<template>
  <div class="employees-container">
    <!-- <el-card style="margin: 10px">
      <div style="display:flex;justify-content:space-between">
        <div class="left"></div>
        <div class="right">right</div>
      </div>
    </el-card> -->
    <toolPage>
      <!-- <h1 slot="left">我是left</h1> -->
      <!-- <template #left>
        <h1>我是left</h1>
      </template> -->

      <template #right>
        <el-button type="primary" @click="handleDownload">导出</el-button>
        <el-button
          type="primary"
          @click="$router.push('/employees/import')"
        >导入</el-button>
        <el-button type="primary" @click="add">+ 新增员工</el-button>
      </template>
    </toolPage>

    <el-card>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column type="index" label="序号" width="150" />
        <el-table-column label="序号" width="150">
          <template slot-scope="scoped">
            {{ (page - 1) * size + 1 + scoped.$index }}
          </template>
        </el-table-column>
        <el-table-column sortable prop="username" label="姓名" width="120" />
        <el-table-column sortable prop="mobile" label="手机号" width="120" />
        <el-table-column sortable prop="workNumber" label="工号" width="120" />
        <el-table-column
          sortable
          prop="formOfEmployment"
          label="聘用形式"
          width="120"
        />
        <el-table-column
          sortable
          prop="departmentName"
          label="部门"
          width="120"
        />
        <el-table-column sortable label="入职时间" width="120">
          <template slot-scope="{ row }">
            ==={{ row.timeOfEntry | forMat('YYYY-MM-DD') }}
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click="handleClick(scope.row)"
            >查看</el-button>
            <el-button type="text" size="small">转正</el-button>
            <el-button type="text" size="small">调岗</el-button>
            <el-button type="text" size="small">离职</el-button>

            <el-button type="text" size="small">角色</el-button>
            <el-button type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        :current-page.sync="page"
        :page-size="size"
        layout="total, prev, pager, next"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />

      <!-- 对话框 -->
      <el-dialog
        title="提示"
        :visible.sync="dialogVisibleEmp"
        width="50%"
        @close="closeHandle"
      >
        <empDialog v-if="dialogVisibleEmp" @success="success" />
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import { getEmployeeList } from '@/api/employees.js'
import empDialog from './empDialog.vue'
export default {
  components: {
    empDialog
  },
  data() {
    return {
      tableData: [],
      page: 1,
      size: 10,
      total: 1,
      dialogVisibleEmp: false,
      tHeader: []
    }
  },
  created() {
    this.getEmp()
  },
  methods: {
    handleClick(row) {
      console.log(row)
    },
    async getEmp() {
      const res = await getEmployeeList(this.page, this.size)
      console.log(res, 8)
      this.tableData = res.data.rows
      this.total = res.data.total
    },
    /* 分页 */
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.page = val
      this.getEmp()
    },
    add() {
      /*
      步骤分析：
      1-显示对话框
      2-对话框布局结构展示
      3-展示部门数据
      4-表单校验+兜底校验
      5-点击确认按钮
        5-1 获取表单数据
        5-2 封装api接口函数
        5-3 调用接口函数
        5-4 成功后：关闭对话框+刷新页面+清空表单数据
      */
      this.dialogVisibleEmp = true
    },
    closeHandle() {
      //  关闭对话框触发的函数
    },
    success() {
      this.dialogVisibleEmp = false
      this.getEmp()
    },

    /* 文件导出 */
    handleDownload() {
      import('@/vendor/Export2Excel').then((excel) => {
        const list = this.tableData // 一维数组
        const data = this.formatJson(list) // 二维数组
        console.log(`data`, data)
        // const data = list
        excel.export_json_to_excel({
          header: this.tHeader, // 导出来的表头
          data, //  导出来的数据 二维数组
          filename: '前端69期', //  文件名
          autoWidth: true, // 宽度自适应
          bookType: 'xlsx' // 导出文件后缀类型
        })
      })
    },
    formatJson(list) {
      const map = {
        id: '编号',
        password: '密码',
        mobile: '手机号',
        username: '姓名',
        timeOfEntry: '入职日期',
        formOfEmployment: '聘用形式',
        correctionTime: '转正日期',
        workNumber: '工号',
        departmentName: '部门',
        staffPhoto: '头像地址'
      }
      this.tHeader = Object.values(map)
      // 返回的是一个二维数组即可
      // [[],[],[],[]]
      return list.map((item) => {
        var obj = {}
        var enKey = Object.keys(map) //  英文键
        for (var key of enKey) {
          obj[map[key]] = item[key] //  {编号:123,密码:456}
        }
        //  上面处理的是obj对象中只有10个字段
        var vals = Object.values(obj) //  获取所有obj对象中的value值  [123,456]
        return vals
      })

      //  收集所需要的数据

      //  return
    }
  }
}
</script>
<style lang="scss" scoped>
.employees-container {
  padding: 20px 30px;
  // .el-card{
  //   margin: 10px;
  // }
}
</style>
